<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>知云——针对编程的个性化学习推荐系统</title>
    <%
        pageContext.setAttribute("APP_PATH", request.getContextPath());
    %>

    <base href="${APP_PATH}">
    <link rel="shortcut icon" type="image/x-icon" href="${APP_PATH}/static/favicon.ico"/>
    <link rel="stylesheet" href="${APP_PATH}/static/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/toastr.min.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/offcanvas.css">
    <link rel="stylesheet" href="${APP_PATH}/static/css/fontawesome.min.css">


</head>
<body>

<jsp:include page="${APP_PATH}/common/head-blog.jsp"/>
<%--用户个人博客管理页面--%>
<c:choose>
    <c:when test="${not empty user}">
        <%--用户已登陆--%>
        <div class="mt-2 col-sm-12 col-md-12 col-lg-9" id="defaultDiv" data-id="${user.id}" style="margin-left: auto;margin-right: auto;">
            <div class="d-flex p-3 bg-white mb-2 rounded shadow-sm">
                <div class="flex-fill text-center"><a href="/blog-all" class="text-dark"><i class="fa fa-paper-plane"></i>文章管理</a></div>
                <div class="flex-fill text-center"><a href="#" class="text-danger"><i class="fa fa-table"></i>类别管理</a></div>
                <div class="flex-fill text-center"><a href="/blog-comment" class="text-dark"><i class="fa fa-comments"></i>评论管理</a></div>
                <div class="flex-fill text-center"><a href="/blog-write" class="text-dark"><i class="fa fa-arrow-circle-right"></i>写文章</a></div>
            </div>
            <div class="bg-white p-3 rounded shadow-sm">
                <div class="border-bottom border-gray pb-2 form-inline">
                    <input id="blogTypeName" class="form-control col-4" type="text" maxlength="20">
                    <a id="btn-submit-blogtype" class="ml-2 btn btn-sm btn-outline-danger">添加分类</a>
                </div>

                <div class="container mt-2">
                    <div class="d-flex bg-white">
                        <div class="p-2 mr-auto">类别</div>
                        <div class="p-2">文章数</div>
                        <div class="p-2">操作</div>
                    </div>
                        <%--博客分类查询结果--%>
                    <div id="blogTypeList">
                    </div>
                </div>

            </div>

        </div>
    </c:when>
    <c:otherwise>
        <%--没有登录，提示用户--%>
        <div class="offset-lg-4 col-lg-4 col-md-12 col-sm-12">
            <div class="alert-warning p-3">
                <h4>您还没有登录，请先<a href="/login">登录</a></h4>
            </div>
        </div>
    </c:otherwise>
</c:choose>


<script src="${APP_PATH}/static/js/jquery-3.3.1.min.js"></script>
<script src="${APP_PATH}/static/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/static/js/toastr.min.js"></script>
<script src="${APP_PATH}/static/js/offcanvas.js"></script>
<script>
    //编辑博客类别
    function editBlogTypeName(ele) {
        //获取id
        var id = $(ele).attr("data-id");
        var typeName = $(ele).attr("data-typeName");
        //创建一个编辑框
        var $input_text = $("<input type='text' class='form-control form-control-sm custom-control-inline' maxlength='20' value='" + typeName + "'>");
        var $btn_submit = $("<a href='javascript:void(0);' style='font-size: small' data-id='" + id + "' onclick='saveBtn(this)'>保存</a>");
        var $btn_cancel = $("<a href='javascript:void(0);' style='font-size: small' data-id='" + id + "' data-blogTypeName='"+typeName+"' onclick='cancelBtn(this)'>取消</a>");
        //找到相应的容器
        $("div[data-editId='" + id + "']").empty();
        $("div[data-editId='" + id + "']").append($input_text).append($btn_submit).append("|").append($btn_cancel);
    }

    //点击保存按钮
    function saveBtn(ele) {
        var id = $(ele).attr("data-id");
        //校验表单
        var blogTypeName = $("div[data-editId='" + id + "']").find("input").val();
        if (blogTypeName.length < 1 || blogTypeName.length > 20) {
            toastr.error("该博客类别名称不合法，请输入至少1个字符，少于20个字符");
            return false;
        }

        //校验成功，提交请求
        $.ajax({
            url: '/updateBlogType',
            data: {blogTypeName: blogTypeName, id: id},
            type: 'POST',
            success: function (result) {
                if (result.code === 100) {
                    $("div[data-editId='" + id + "']").empty();
                    $("div[data-editId='" + id + "']").append(blogTypeName);
                    toastr.success("操作成功！");
                } else {
                    toastr.error(result.extend.error);
                }
            }
        })

    }

    //点击取消按钮
    function cancelBtn(ele) {
        var id = $(ele).attr("data-id");
        var blogTypeName = $(ele).attr("data-blogTypeName");
        $("div[data-editId='" + id + "']").empty();
        $("div[data-editId='" + id + "']").append(blogTypeName);
    }

    //删除博客类别
    function delBlogType(ele) {
        //获取id
        var id = $(ele).attr("data-id");
        if (confirm("此操作不可逆，确认要删除吗？")) {
            $.ajax({
                url: '/delBlogType',
                data: {blogTypeId: id},
                type: 'POST',
                success: function (result) {
                    if (result.code === 100) {
                        //删除成功
                        //删去该div
                        $("div[data-removeId=" + id + "]").empty();
                        $("div[data-removeId=" + id + "]").remove();
                        toastr.success("操作成功！");
                    } else {
                        toastr.error(result.extend.error);
                    }
                }
            })
        }
    }

    //查询博客类别
    $(function () {
        $.ajax({
            url: '/getAllUserBlogType',
            data: '',
            type: 'GET',
            success: function (result) {
                if (result.code === 100) {
                    //成功获取,验证非空
                    if (result.extend.userBlogTypeList.length > 0) {
                        var $blogTypeList = $("#blogTypeList");
                        $.each(result.extend.userBlogTypeList, function (index, item) {
                            var $div_out = $("<div data-removeId='" + item.id + "' class='d-flex'>");
                            $("<div class='p-2 mr-auto' data-editId='" + item.id + "'>").append(item.blogtypename).appendTo($div_out);
                            $("<div class='p-2'>").append(item.blognum).appendTo($div_out);
                            var $a1 = $("<a href='javascript:void(0);' style='font-size: small' data-id='" + item.id + "' data-typeName='" + item.blogtypename + "' onclick='editBlogTypeName(this)'>编辑</a>");
                            var $a2 = $("<a href='javascript:void(0);' style='font-size: small' class='text-danger' data-id='" + item.id + "' onclick='delBlogType(this)'>删除</a>");
                            $("<div class='p-2'>").append($a1).append("|").append($a2).appendTo($div_out);
                            $div_out.appendTo($blogTypeList);
                        })
                    } else {
                        toastr.info("你尚未创建博客类别！");
                    }
                } else {
                    toastr.error("获取博客类别失败，请重新登录后重试！");
                }
            }
        });
    });

    function randomStrCode(len) {
        var d;
        var e;
        var b = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
        var c = "";
        for (d = 0; len > d; d += 1) {
            e = Math.random() * b.length, e = Math.floor(e), c += b.charAt(e);
        }
        return c;
    }

    //添加分类
    $("#btn-submit-blogtype").click(function () {
        var blogTypeName = $("#blogTypeName").val();
        //校验表单
        if (blogTypeName.length < 1 || blogTypeName.length > 20) {
            toastr.error("该博客类别名称不合法，请输入至少1个字符，少于20个字符");
            return false;
        }
        //开始提交

        var id = randomStrCode(16);
        $.ajax({
            url: '/addUserBlogType',
            data: {blogTypeName: blogTypeName, id: id},
            type: 'POST',
            success: function (result) {
                if (result.code === 100) {
                    //添加成功,手动加入到div中
                    var $div_out = $("<div data-removeId='" + id + "' class='d-flex bg-white'>");
                    $("<div class='p-2 mr-auto' data-editId='" + id + "'>").append(blogTypeName).appendTo($div_out);
                    $("<div class='p-2'>").append("0").appendTo($div_out);
                    var $a1 = $("<a href='javascript:void(0);' style='font-size: small' data-id='" + id + "' data-typeName='" + blogTypeName + "' onclick='editBlogTypeName(this)'>编辑</a>");
                    var $a2 = $("<a href='javascript:void(0);' style='font-size: small' class='text-danger' data-id='" + id + "' onclick='delBlogType(this)'>删除</a>");
                    $("<div class='p-2'>").append($("<div>").append($a1).append("|").append($a2)).appendTo($div_out);
                    $div_out.appendTo($("#blogTypeList"));
                } else {
                    toastr.error("博客类别添加失败，请稍后重试");
                }
            }
        });
    });
</script>

</body>

</html>
